<template>
  <section class="container">
    <transition name="fade-in">
      <div class="screen">
        <div class="addressList" v-if="!areaError">
          <div v-for="item in areaList" class="address">
            <a class="pull-left">
              <img src="../styles/asset/shang.png" />
            </a>
            <div class="add_text">
              <h3 v-text="item.storeName"></h3>
              <p v-text="item.storeAddr"></p>
            </div>
          </div>
        </div>
        <div class="addressList" v-else>
          <div class="thumbnail fsbg">
            <img src="../styles/asset/no-detail-bg.png" />
          </div>
          <p class="text-center" >{{areaError}}</p>
        </div>
      </div>
    </transition>
    <simplert  ref="simplert"></simplert>
  </section>
</template>
<script>
  import Simplert from '../../components/dialog/dialog.vue'

  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  }

  export default{
    data () {
      return {
        lists: [],
        value : 0,
        areaList: [],
        token:"",
        areaCode:"",
        areaError:false,
        postState:false
      }
    },
    created () {
    },
    computed: {

    },
    mounted(){
      const that = this;
      const url = window.location.href;
      this.areaCode = filters.parseURL(url).params.cityId;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getShopList()
      })
    },
    components: {
      Simplert
    },
    methods: {
      openMessage(title, message, type) {
        let obj = {
          title: title,
          message: message,
          type: type
        }
        this.$refs.simplert.openSimplert(obj)
      },
      getShopList(){
        this.$api.post('/reclaim/v1/authApi/reclaimStoreList?areaCode='+this.areaCode,'',s=>{
          this.areaList = s.module;
          if(this.areaList.length == 0)
          {
            areaError = true
          }
        },f=>{
          this.openMessage(f.errorMessage)
        },{
          "token": this.token
        })
      }
    }
  }
</script>
<style scoped>
  @import "../styles/styles.css";
  #app{ width: 100%; height: 100%;}
  a,p,h3{font-size: 1.4rem;}
  .container,.screen{ position: relative; width: 100%; height: 100%; background: #f5f5f5;}
  .screen{ overflow-y: scroll;}
  .addressList{ padding: 1rem;}
  .address{ padding: 1rem 1rem 1rem 6rem;  background-color: #fff; box-shadow: 0 0 1rem rgba(0,0,0,0.1); margin-bottom: 1rem; overflow: hidden;}
  .address>.pull-left{ width: 4rem; height: 4rem; float: left; margin-left: -5rem;}
  .address>.pull-left>img{ width: 100%;}
  .address p{ margin: 0.4rem 0 0;}
  .fsbg>img{ width: 100%;}
  .text-center{ text-align: center;}
  .fsbg{ padding: 5rem 8rem 4rem;}
  .slide-fade-m-enter-active {  transition: all .2s ease;  }
  .slide-fade-m-leave-active {  transition: all .3s ease;  }
  .slide-fade-m-enter, .slide-fade-m-leave-active {  opacity: 0;  }
</style>
